<template>
	<view style="display: flex;">
		<!-- <view class="store-name">{{store_name}}</view> -->
		<!-- <view style="width: 25%;" class="top-box"> -->
			<!-- <scroll-view scroll-x="true" :scroll-into-view="'tab-' + scrollIntoView" scroll-with-animation> -->
			<scroll-view scroll-y="true" style="width: 25%;background-color: #F0F2F5;">
			
				<view class="tab-box">
					<view v-for="(it, i) in classArr" :key="i" @click="tabClick(i)" :id="'tab-' + i">
						<view class="tab-list" :class="current == i ? 'actclass' : ''">{{it.title}}</view>
					</view>
				</view>
			</scroll-view>
		<!-- </view> -->
		
		<scroll-view style="background-color: #fff;" :style="{height:screenHeight+'px'}" scroll-y="true">
			<!-- ////////////////////////////////// -->
			<view class="nav-box">

			<!-- 商品item -->
			<view class="nav-list" v-for="(it,i) in classShopList" :key="i" v-if="classShopList.length > 0">
					<!-- <u-image width="216rpx" height="216rpx" mode="aspectFill" :src="it.logo"></u-image> -->
					<image class="logo" mode="aspectFit" :src="it.logo"></image>
					<view style="">
						<view >
							<view style="text-align: center;">{{it.title}}</view>
							<view v-if="userinfo.lid == 1" style="display: flex;font-size: 20rpx;">
								<view  style="color: rgba(255,147,68,1);font-size: 25rpx;margin-left: 10rpx;">{{it.vip_price}}</view>
								<!-- <view style="color: #9e9e9e;text-decoration: line-through;margin-left: 10rpx;">{{it.price}}</view> -->
							</view>
							<view v-else style="display: flex;font-size: 20rpx;">
								<view style="color: rgba(255,147,68,1);font-size: 25rpx;margin-left: 10rpx;">{{it.price}}</view>
							</view>
						</view>
						<view class="pop-number">
							<u-number-box 
								:input-width="30"
								:disabled-input="true" 
								size="20" 
								:min="0" 
								bg-color="#fff" 
								v-model="it.num"
								@plus="plusCount(it)"
								@minus="minusCount(it)"
							></u-number-box>
						</view>
					</view>
					
					<u-badge size="default" absolute :count="it.num" class="badge"></u-badge>
			</view>
			
			<view v-if="classShopList.length == 0">{{check == 0 ? '请先登录' : '暂无数据'}}</view>
			</view>
			<!-- /////////////////////////////////// -->
		</scroll-view>
		<view class="" style="width: 100%;height:130rpx;position: fixed;bottom: 0rpx;z-index: 99;" v-if="check != 0">
			<view class="but" @click="isShow">
				<view class="but-img-box">
					<image style="width: 70rpx;height: 70rpx;" src="./../../static/wash.png"></image>
					<u-badge size="default" absolute :count="badge" is-center class="badge"></u-badge>
				</view>
				<view style="display: flex;align-items: center;">
					<!-- toFixed(2)获取小数点后2位 -->
					<!-- <view v-if="counting != 0" style="padding-right: 20rpx;color: #FF8941;">金额:￥{{total_price.toFixed(2)}}</view> -->
					<!-- <view style="padding-right: 20rpx;color: #FF8941;">获得1次免费清洗</view> -->
					<!-- <view style="padding-right: 20rpx;font-size: 40rpx;color: #AEAEAE;text-decoration:line-through;">原价:￥99.00</view> -->
					<view class="tijiao-but">
						提交订单
					</view>
				</view>
			</view>
		</view>
		
		<!-- 弹窗 -->
		<u-popup v-model="show" mode="bottom" border-radius="14" height="750">
			<view class="pop-box">
				<view style="position: fixed;width: 100%;background-color: #fff;top: 0;z-index: 999;">
					<view class="pop-title">已添加衣物</view>
					<view class="pop-clear" @click="clear">清空</view>
				</view>
				<scroll-view scroll-y="true" style="height: 600rpx;padding-top: 100rpx;">
					<view class="pop-boxs" v-if="shopList.length>0">
						<view class="pop-lists" v-for="(it, i) in shopList" :key="i" @click="xuanzhong(it, i)">
							<view class="pop-list-left">
								<view class="pop-radius">
									<view class="pop-kong" v-show="!it.act"></view>
									<!-- <image class="pop-have" v-show="it.act" src="./../../static/wash.png" mode=""></image> -->
								</view>
								<view class="pop-pic">
									<image :src="it.logo" mode=""></image>
								</view>
								<view class="pop-name">{{it.title}}</view>
							</view>
							<view class="pop-list-right">
								<view class="pop-number">
									<u-number-box 
										:input-width="30"
										:disabled-input="true"
										@plus="getCartNum(it)"
										@minus="getCartNum(it)" 
										size="20" 
										:min="0" 
										bg-color="#fff" 
										v-model="it.num">
									</u-number-box>
								</view>
								<view class="">￥{{it.price}}</view>
								x{{it.num}}
							</view>
						</view>
						<view class="finished">—— 没有更多了 ——</view>
					</view>
					<view v-else>暂无数据</view>
				</scroll-view>
				<view class="but_uprop">
					<view class="but-img-box">
						<image style="width: 70rpx;height: 70rpx;" src="./../../static/wash.png"></image>
						<u-badge size="default" absolute :count="badge" class="badge" is-center></u-badge>
					</view>
					<view style="display: flex;align-items: center;">
						<view  style="padding-right: 20rpx;color: #FF8941;">金额:￥{{total_price.toFixed(2)}}</view>
						
						<view class="tijiao-but" v-if="check != 0" @click="submit">
							提交订单
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				show: false,
				value: 1,
				current: 0,
				scrollIntoView: 0,
				classArr: [],
				classShopList: [],
				page: 1,
				total: false,
				cate_id: 0,
				// goodsInfo: '',
				goods_type: '',
				shopList: [],
				size: 12,
				store_id: '',
				store_name: '',
				order_page: 1,
				order_total: false,
				total_price: 0,
				count_type: '',
				allPrice: '',
				listCount: [],
				badge: 0,
				userinfo:[],
				screenHeight:'',
				check:0,
				showPrice:'false',
				judge:'',
				counting:[]
			}
		},
		onLoad(options) {
			let loginstatus = uni.getStorageSync('token');
			this.store_id = uni.getStorageSync('store_id');
			if(loginstatus)
			{
				this.check = 1
				this.screenHeight = uni.getSystemInfoSync().windowHeight
				console.log(options)
				// this.store_id = options.store_id
				this.store_id = uni.getStorageSync('store_id')
				this.store_name = uni.getStorageSync('store_name')
				console.log(this.store_id,'this.store_id')
				uni.setNavigationBarTitle({
					title: uni.getStorageSync('store_name')
				})
			}
		},
		onShow() {
			if(this.check)
			{
				this.show = false
				this.getUserInfo()
				this.getTabs()
				this.getOrderList()
			}
		},
		// onReachBottom() {
		// 	if (this.total) return false
		// 	this.page++
		// 	this.getYyList()
		// },
		methods: {
			// 获取用户信息（判断是否是VIP会员）
			getUserInfo() {
				this.$ajaxRequest.get(this.baseUrl + 'user/info', {
					store_id: this.store_id
				}, true).then(res => {
					// console.log(res)
					if (res.data.code == 200) {
						this.userinfo = res.data.data
					} else {
						uni.showToast({
							title:res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 获取分类
			getTabs() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/goods/cate', {
					store_id: this.store_id,
				}, false).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
						this.classArr = res.data.data
						// console.log('555',this.classArr);
						this.cate_id = this.classArr[this.current].id
						this.page = 1
						this.total = false
						this.getYyList()
					} else {
						uni.showToast({
							title: res.data.info,
							icon: 'none'
						})
					}
				})
			},
			// 获取列表
			getYyList() {
				let url = ''
				if (uni.getStorageSync('token')) {
					url = 'shop/goods/goodlist'
				} else {
					url = 'shop/goods/list'
				}
				this.$ajaxRequest.get(this.baseUrl + url, {
					cate_id: this.cate_id,
					store_id: this.store_id,
					// page: this.page,
					// size: this.size
				}, false).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						if (this.page == 1) {
							this.classShopList = res.data.data
						} else {
							this.classShopList.push.apply(this.classShopList, res.data.data)
						}
						if (res.data.data.length < this.size) this.total = true
					} else {
						
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 列表加减
			countAdd(it) {
				this.$ajaxRequest.post(this.baseUrl + 'shop/cart/Info', {
					good_id: it.id,
					store_id: this.store_id,
					num: 1,
					type: this.count_type
				}, false).then(res => {
					if (res.data.code == 200) {
						this.getOrderList()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			plusCount(it) {
				console.log(it,'fuck zhoufei');
				this.count_type = 1
				this.countAdd(it)
			},
			minusCount(it) {
				this.count_type = 0
				this.countAdd(it)
			},
			// 购物车加减
			getCartNum(it) {
				this.$ajaxRequest.put(this.baseUrl + 'shop/cart/Info', {
					cart_id: it.id,
					store_id: this.store_id,
					num: it.num
				}, false).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						if (it.num == 0) this.getOrderList()
						this.getYyList()
						this.jisuan()
					} else {
						uni.showToast({
							title:res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			isShow() {
				this.show = true
				this.order_page = 1
				this.order_total = false
				this.getOrderList()
			},
			// 订单列表
			getOrderList() {
				this.$ajaxRequest.get(this.baseUrl + 'shop/cart/Info', {
					store_id: this.store_id,
					// page: this.order_page,
					// size: 5
				}, false).then(res => {
					if (res.data.code == 200) {
						if (this.order_page == 1) {
							this.shopList = res.data.data
							console.log('this.shopList',this.shopList);
						} else {
							this.shopList.push.apply(this.shopList, res.data.data)
						}
						if (res.data.data.length < 5) this.order_total = true
						this.shopList.filter(it => {
							it.act = true
						})
						this.jisuan()
						this.$forceUpdate()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			tabClick(i) {
				this.current = i
				this.cate_id = this.classArr[i].id
				this.page = 1
				this.total = false

				if(this.classArr[i].id == 74 || this.classArr[i].id == 75)
				{
					this.showPrice = true
				}else{
					this.showPrice = false
				}

				this.getYyList()
				// this.scrollIntoView = Math.max(0, i-1);
			},
			submit() {
				let that = this
				this.counting = []
				this.shopList.forEach(e => {
					// that.judge = e.special
					this.counting.push(e.special)
				});
				this.judge = Array.from(new Set(this.counting))
				console.log(Array.from(new Set(this.counting)),'shabizhoufei');
				console.log(this.judge.length,'shadiaozhoufei');
				// console.log(this.counting);

				if(this.judge.length != 1)
				{
					uni.showModal({
						title:'提示',
						content:'特殊商品请单独下单',
					})
				}else{
					let ids = ''
					let arr = []
					var userOpsition = uni.getStorageSync('userOpsition')
					that.shopList.filter(it => {
						if (it.act) {
							arr.push(it.id)
						}
					})
					ids = arr.join(',')
					if(userOpsition == ''){
						uni.showModal({
							title:'请开启GPS定位服务',
							content: '请返回首页,开启GPS,用于获取您的位置信息',
							showCancel: false
						})
					}
					if (ids != '') {
						uni.navigateTo({
							url:'/pages/yuyue/appointment/index?ids=' + ids + '&store_id=' + that.store_id
						})
					} else {
						uni.showToast({
							title:'订单列表不能为空',
							icon:'none'
						})
					}
				}
				
			},
			jisuan() {
				let arr = []
				this.total_price = 0
				this.badge = 0
				this.shopList.filter(item => {
					if (item.act){
						// parseFloat(item.price)限制负值输入，且输入值不为空时自动保留两位小数，等同于js的parseFloat(value).toFixed(2)
						// 判断是否是会员价
						if(this.userinfo.lid == 1 || this.userinfo.lid == 2 || this.userinfo.lid == 3){
							this.total_price += item.num * parseFloat(item.vip_price)
						}else{
							this.total_price += item.num * parseFloat(item.price)
						}
						
						this.badge += item.num
					}
				})	
			},
			xuanzhong(it, i) {
				
				console.log(it);
				it.act = !it.act
				this.jisuan()
				this.$forceUpdate()
			},
			clear() {
				this.$ajaxRequest.delete(this.baseUrl + 'shop/cart/all', {}, true).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
						this.getYyList()
						this.getOrderList()
						this.show = false
					} else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #F0F2F5;
	}
	.store-name {
		padding: 20rpx 30rpx;
		background: #fafafa;
		font-size: 30rpx;
	}
	.top-box {
		border: 1px solid red;
		position: sticky;
		top: 0;
		padding: 25rpx 0;
		border-top: 20rpx solid #fafafa;
		background: #fff;
		z-index: 999;
		/* background-color: transparent; */
	}
	.tab-box {
		/* padding-left: 30rpx; */
		/* border: 1px solid #000; */
		
	}
	.tab-list {
		/* border: 1px solid #000; */
		width:100%;
		height:80rpx;
		color: #4B4B4B;
		text-align: center;
		line-height: 80rpx;
		margin-right: 20rpx;
		font-size: 36rpx;
	}
	.actclass {
		background:rgba(255, 255, 255, 1.0);
		color: #FF8C42;
	}
	
	.list {
		padding: 10rpx 30rpx 10rpx 30rpx;
	}

	.nav-box {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background-color: #fff;
		padding-bottom: 200rpx;
	}

	.nav-list {
		position: relative;
		/* border: 1px solid red; */
		width: 30%;
		margin-left: 2%;
		margin-bottom: 30rpx;
	}
	.logo{
		display: block;
		margin: 0 auto;
		width: 100rpx;
		height: 100rpx;
		/* border: 1px solid red; */
	}
	.but{
		margin-left: 30rpx;
		border-radius: 45rpx;
		/* padding-top: 5rpx;
		padding-bottom: 5rpx; */
		border: 1rpx solid rgba(128,128,128,.2);
		width: 690rpx;
		/* position: fixed;
		bottom: 30rpx; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		position: absolute;
		top: 0px;
	}
	.but_uprop{
		margin-left: 30rpx;
		border-radius: 45rpx;
		/* padding-top: 5rpx;
		padding-bottom: 5rpx; */
		border: 1rpx solid rgba(128,128,128,.2);
		width: 690rpx;
		position: fixed;
		bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
	}
	.but-img-box{
		position: relative;
		padding-left: 60rpx;
	}
	.badge {
		background:linear-gradient(-31deg,rgba(253,131,0,1) 0%,rgba(255,202,90,1) 100%);
	}
	.tijiao-but{
		width:238rpx;
		height:100rpx;
		background:linear-gradient(-17deg,rgba(255,114,59,1),rgba(255,147,68,1));
		border-radius:0px 45rpx 45rpx 0px;
		text-align: center;
		color: white;
		line-height: 100rpx;
	}
	
	/* 弹窗 */
	.pop-box {
		position: relative;
	}
	.pop-title {
		font-size: 34rpx;
		font-weight: 700;
		text-align: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #E6E6E6;
	}
	.pop-clear {
		position: absolute;
		top: 40rpx;
		right: 55rpx;
		color: #ADADAD;
		font-size: 24rpx;
	}
	.pop-boxs {
		padding: 0 30rpx 200rpx;
		box-sizing: border-box;
	}
	.pop-lists {
		display: flex;
		align-items: center;
		padding-top: 30rpx;
	}
	.pop-list-left {
		display: flex;
		align-items: center;
		width: 60%;
	}
	.pop-kong {
		width: 28rpx;
		height: 28rpx;
		border: 1rpx solid #FF8C42;
		border-radius: 50%;
	}
	.pop-have {
		width: 31rpx;
		height: 30rpx;
	}
	.pop-pic {
		width: 124rpx;
		height: 124rpx;
	}
	.pop-pic>image {
		width: 124rpx;
		height: 124rpx;
		border-radius: 10rpx;
	}
	.pop-name {
		font-size: 32rpx;
		color: #575757;
	}
	.pop-list-right {
		display: flex;
		justify-content: space-between;
		/* justify-content: flex-end; */
		align-items: center;
		width: 40%;
		padding-right: 30rpx;
	}
	.pop-number {
		border: 1rpx solid #DEDEDE;
		border-radius: 30rpx;
		overflow: hidden;
		width: 170rpx;
	}
</style>
